<template>
	<el-dialog title="环境维护" :visible.sync="dialogVisible" width="950px" @close="handleClose" append-to-body
		:close-on-click-modal="false">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>环境维护</span>
		</div>

		<div class="smp-search">
			<el-form :inline="false" label-width="120px" size="mini" ref="form" :model="form" :rules="rules" :disabled="form.requireType=='04'"> 

				<el-row>
						<el-col :span="12" prop="requireType">
							<el-form-item label="操作类型:" >
								<el-select v-model="form.requireType" style="width: 100%"   
								placeholder="申请类型" 
								@change="typeChange"
								:disabled="updateDisable">
									<el-option v-for="item in dict('SMP0025')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col> 
						
						<el-col :span="12">
							<el-form-item label="所属系统:" prop="systemNo">
								<el-select v-model="form.systemNo" disabled style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入系统编号或名称" :remote-method="getsystems">
									<el-option v-for="item in systemListAll" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="主机名称:" prop="hostName">
								<el-input v-model="form.hostName" placeholder="请输入主机名称" :disabled="updateDisable"></el-input>
							</el-form-item>
						</el-col>
						

						<el-col :span="12">
							<el-form-item label="环境类型:" prop="envirType">
								<el-select v-model="form.envirType" :disabled="updateDisable" style="width: 100%" placeholder="环境类型" >
									<el-option v-for="item in dict('SMP0026')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="ESB环境IP:" prop="esbAddr">	
								<el-select v-model="form.esbAddr" :disabled="updateDisable" style="width: 100%" placeholder="请选择ESB环境IP" >
									<!-- <el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option> -->
									<el-option v-for="item in esbEnvironmentList" :key="item.ip" :label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="系统IP:" prop="systemCurrentAddr" v-if="form.requireType != '02'">
								<el-input v-model="form.systemCurrentAddr" :disabled="updateDisable" placeholder="eg:tcp://127.0.0.1"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="系统当前IP:"  prop="systemCurrentAddr" v-if="form.requireType == '02'">
								<el-input v-model="form.systemCurrentAddr" :disabled="updateDisable" placeholder="eg:tcp://127.0.0.1"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="系统目标IP:" prop="systemTargetAddr" v-if="form.requireType == '02'">
								<el-autocomplete placeholder="eg:tcp://127.0.0.1"  style="width: 100%;" :fetch-suggestions="fetchProtocal" v-model="form.systemTargetAddr" class="inline-input"></el-autocomplete>
							</el-form-item>
						</el-col>
						
				</el-row>
			</el-form>
		</div>
		<maintainEnvirView ref="maintainEnvirView" @maintainEnvir="maintainEnvir" @initOperation="initOperation" @resetServer="resetServer"/>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
	import { checkEnvirInfo } from '@/api/demand.js';
	import { getSystemHistoryAddr,getEsbEnvironmentByEsbFlg } from '@/api/environment.js';
	import maintainEnvirView from './maintainEnvirView';
	export default {
		 components: {
			maintainEnvirView
		},
		data() {
			return {
				index:0,
				type:'add',
				colse:0,
				dialogVisible: false,
				updateDisable: false,
				esbEnvironmentList: [],
				listAddr:[],
				 rules: {
					systemNo: [{
						required: true,
						message: "系统编号不能为空",
						trigger: ['blur', 'change']
					}],
					hostName: [{
						required: true,
						message: "主机名称不能为空",
						trigger: ['blur', 'change']
					}],
					envirType: [{
						required: true,
						message: "环境类型不能为空",
						trigger: ['blur', 'change']
					}],
					esbAddr: [{
						required: true,
						message: "ESB环境IP不能为空",
						trigger: ['blur', 'change']
					}],
					systemCurrentAddr: [{
						required: true,
						message: "系统当前IP不能为空",
						trigger: ['blur', 'change']
					}],
					systemTargetAddr: [{
						required: true,
						message: "系统目标IP不能为空",
						trigger: ['blur', 'change']
					}]
				}, 
				form: {
					 requireType: '',
					 systemNo: '',
					 hostName: '',
					 envirType: '',
					 esbAddr: '',
					 systemCurrentAddr: '',
					 systemTargetAddr: ''
				},

			};
		},
		created() {
			this.getEsbEnvironmentList();
		},
		

		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},
			onSubmit() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						checkEnvirInfo(this.form).then(response => {
							let param = {};
							Object.assign(param,this.form);
							let code = response.data.code;
							if(code == '0000'){
								if(this.type == 'add'){
									this.$emit('addEnvirInfo',param);
								}else{
									this.$emit('updateEnvirInfo',param,this.index);
								}
								this.dialogVisible = false;
							}else{
								this.$message({
						duration:5000,
								 	type: 'error',
								 	message: response.data.message
								});
							}
							this.reset();
						}).catch(error => {
							this.$message({
						duration:5000,							 	
						type: 'error',
							 	message: error
							});
						});	
						
					}else{
						return false;
					}
				});	
			},

			showDialog(systemNo) {
				let system = this.$store.getters.getSystem(systemNo);
				 Object.assign(this.form,system);
				 
				this.form.requireType='01'; 
				this.type = 'add';
				this.dialogVisible = true;
				this.updateDisable = false;
				
			},
			
			showDialog2(row,index) {
				this.type = 'update';
				this.index = index;
				this.form = row;
				this.dialogVisible = true;
				this.updateDisable = true;
			},
			
			closeDialog() {
				this.reset();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},
			
			
			
			fetchProtocal(queryString,cb){
				var protocals =[]
				 this.listAddr.forEach((item,index)=>{
					 protocals.push({value:item})
				 });

				var protocals1  = queryString? protocals.filter(item=>{
					return item.value.indexOf(queryString)>-1;
				}):protocals;
				cb(protocals1);
			},
			
			
			initOperation(){
				this.form.requireType = '01';
			},
		
			typeChange(val){
				this.colse=0;
				if(val=="01"){
					this.reset();
				}else{
					this.updateDisable = true;
					this.$refs.maintainEnvirView.showDialog(this.form.systemNo);
				}
			},
			
			maintainEnvir(row){
				this.colse=1;
				Object.assign(this.form,row);
				getSystemHistoryAddr(this.form).then(response => {
					this.listAddr = response.data.extend;
				}).catch(error => {
					console.info(response.data.code);
				    console.info(response.data.message);
				});	
			},
			
			
			
			
			resetServer(){
				if(this.colse==0){
					this.form.requireType='01';
					this.type = 'add';
					this.dialogVisible = true;
					this.updateDisable = false;
				}
			}
			
			
		},

	}
</script>

<style>
</style>
